<template>
    <div class="album-detail">
        <!-- 专辑介绍 -->
        <AlbumTopInfo :dynamic="dynamic" :albuminfo="albuminfo"/>
        <!-- 专辑歌曲、评论、详情展示 -->
        <div class="singer-words">
            <el-tabs v-model="activeName">
            <el-tab-pane label="歌曲列表" name="first">
                <SongTable :songs="albumsong"/>
            </el-tab-pane>
            <el-tab-pane label="评论" name="second">评论</el-tab-pane>
            <el-tab-pane label="专辑详情" name="third">专辑详情</el-tab-pane>
  </el-tabs>
        </div>
    </div>
</template>
<script>
import AlbumTopInfo from './Childcomps/AlbumTopInfo.vue';
import SongTable from '@/components/content/SongTable.vue';
export default {
    name: "",
    components: { AlbumTopInfo, SongTable },
    data() {
        return {
            // 专辑的id
            id: "",
            // 专辑歌曲
            albumsong: [],
            // 专辑信息
            albuminfo: {},
            // 专辑动态信息
            dynamic: {},
            activeName:"first"
        };
    },
    created() {
        // 获取路由参数
        this.id = this.$route.params.id;
        // 发送请求获取数据
        this.getAlbumDetailBy();
        // 获取专辑的动态信息
        this.getAlbumDynamicBy();
    },
    methods: {
        async getAlbumDetailBy() {
            let resAlbum = await this.$API.album.getAlbumDetail(this.id);
            if (resAlbum.code == 200) {
                this.albumsong = resAlbum.songs;
                this.albuminfo = resAlbum.album;
            }
        },
        async getAlbumDynamicBy() {
            let resAlbumDynamic = await this.$API.album.getAlbumDynamic(this.id);
            if (resAlbumDynamic.code == 200) {
                this.dynamic = resAlbumDynamic
            }
        }
    },
    
}
</script>
<style lang="less" scoped>
    .singer-words{
        margin-left: 10px;
    }
</style>